<template>
  <div class="profile-page">
    <el-header class="header" height="70px">
      <div class="header-content">
        <div class="logo">
          <h1 @click="$router.push('/')" style="cursor: pointer;">周周淘商城</h1>
        </div>
        <div class="nav-actions">
          <el-button @click="$router.push('/products')" type="primary" plain>
            继续购物
          </el-button>
          <template v-if="userStore.token">
            <el-dropdown @command="handleUserCommand">
              <el-button type="primary">
                {{ userStore.userInfo?.username || '用户' }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </div>
    </el-header>

    <el-main class="main-content">
      <div class="page-header">
        <h2>个人中心</h2>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item @click="$router.push('/')">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-row :gutter="40">
        <el-col :span="8">
          <!-- 用户信息卡片 -->
          <el-card class="user-card" shadow="hover">
            <div class="user-avatar">
              <el-avatar :size="80" src="https://via.placeholder.com/80x80/409eff/ffffff?text=用户" />
            </div>
            <div class="user-info">
              <h3>{{ userStore.userInfo?.username || '用户' }}</h3>
              <p>会员等级：普通会员</p>
              <p>注册时间：2024-01-01</p>
            </div>
            <div class="user-stats">
              <div class="stat-item">
                <div class="stat-number">12</div>
                <div class="stat-label">订单数</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">¥1,234</div>
                <div class="stat-label">余额</div>
              </div>
            </div>
          </el-card>

          <!-- 快捷操作 -->
          <el-card class="quick-actions" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>快捷操作</span>
              </div>
            </template>
            <div class="action-list">
              <div class="action-item" @click="$router.push('/orders')">
                <el-icon><Document /></el-icon>
                <span>我的订单</span>
              </div>
              <div class="action-item" @click="$router.push('/cart')">
                <el-icon><ShoppingCart /></el-icon>
                <span>购物车</span>
              </div>
              <div class="action-item">
                <el-icon><Star /></el-icon>
                <span>我的收藏</span>
              </div>
              <div class="action-item">
                <el-icon><Location /></el-icon>
                <span>收货地址</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="16">
          <!-- 个人信息设置 -->
          <el-card class="profile-settings" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>个人信息</span>
                <el-button type="primary" size="small" @click="editMode = !editMode">
                  {{ editMode ? '取消' : '编辑' }}
                </el-button>
              </div>
            </template>

            <el-form
              ref="profileFormRef"
              :model="profileForm"
              :rules="profileRules"
              label-width="100px"
              :disabled="!editMode"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="profileForm.username" />
              </el-form-item>

              <el-form-item label="手机号" prop="phone">
                <el-input v-model="profileForm.phone" />
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="profileForm.email" />
              </el-form-item>

              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="profileForm.gender">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="生日" prop="birthday">
                <el-date-picker
                  v-model="profileForm.birthday"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-form-item>

              <el-form-item v-if="editMode">
                <el-button type="primary" @click="saveProfile">保存</el-button>
                <el-button @click="cancelEdit">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 安全设置 -->
          <el-card class="security-settings" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>安全设置</span>
              </div>
            </template>

            <div class="security-item">
              <div class="security-info">
                <h4>登录密码</h4>
                <p>建议定期更换密码，确保账户安全</p>
              </div>
              <el-button type="primary" size="small">修改密码</el-button>
            </div>

            <el-divider />

            <div class="security-item">
              <div class="security-info">
                <h4>手机绑定</h4>
                <p>已绑定：138****8888</p>
              </div>
              <el-button type="primary" size="small">更换手机</el-button>
            </div>

            <el-divider />

            <div class="security-item">
              <div class="security-info">
                <h4>邮箱绑定</h4>
                <p>未绑定邮箱</p>
              </div>
              <el-button type="primary" size="small">绑定邮箱</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ArrowDown, Document, ShoppingCart, Star, Location } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const editMode = ref(false)
const profileFormRef = ref<FormInstance>()

const profileForm = reactive({
  username: userStore.userInfo?.username || '',
  phone: '13800138000',
  email: 'user@example.com',
  gender: 'male',
  birthday: ''
})

const profileRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'orders':
      router.push('/orders')
      break
    case 'logout':
      userStore.logout()
      ElMessage.success('已退出登录')
      router.push('/')
      break
  }
}

const saveProfile = async () => {
  if (!profileFormRef.value) return

  try {
    await profileFormRef.value.validate()
    ElMessage.success('个人信息保存成功')
    editMode.value = false
  } catch (error) {
    ElMessage.error('请检查输入信息')
  }
}

const cancelEdit = () => {
  editMode.value = false
  // 重置表单数据
  Object.assign(profileForm, {
    username: userStore.userInfo?.username || '',
    phone: '13800138000',
    email: 'user@example.com',
    gender: 'male',
    birthday: ''
  })
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  color: #409eff;
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.user-card,
.quick-actions,
.profile-settings,
.security-settings {
  margin-bottom: 20px;
}

.user-avatar {
  text-align: center;
  margin-bottom: 20px;
}

.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.user-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.user-info p {
  margin: 5px 0;
  color: #666;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.action-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.security-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.security-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>
